{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520</title>
    <meta name="viewport" content="width=device-width, initial-scale= 1.0,shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">

{#   	<script src="{% static 'valentine/jquery-1.11.0.min.js' %}" type="text/javascript"></script>#}

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link href="{% static 'valentine/my.css' %}" rel="stylesheet" type="text/css"/>

{#    <script src="{% static 'valentine/jqueryfireworks.js' %}"></script>#}

         <script src="{% static 'valentine/jqueryfireworks.js' %}"></script>
    <link href="{% static 'valentine/valentinephoto.css' %}" rel="stylesheet" type="text/css"/>

    <script src="{% static 'valentine/valentinephoto.js' %}" type="text/javascript"></script>


{#    <script src="{% static 'valentine/snow_time.js' %}"></script>#}

    <script src="{% static 'iconfont/iconfont.js' %}"></script>
    <style>
        .icon {
          width: 2em;
          height: 2em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var plist={{ photo_dict|safe }}; //获取序列化后的queryset,传给valentinephoto.js 调用

    </script>

</head>
<body onselectstart="return false;">

    {% if user.is_authenticated %}
        <a class="submit-row" href="{% url 'valentine:upload' %}"> 上传 </a>
    {% endif %}
{#    <div>{{ photo_dict|safe }}</div>#}


		<div class="wrap" id="wrap">

		    <div class="photo photo_front" id="photo_{index}" onclick="turn(this)">
		      <div class="photo-wrap">
		        <div class="side side-front">
		          <p class="image"><img src="/media/{img}"></p>

		          <p class="caption">
                      <svg class="icon" aria-hidden="true" >
                          <use xlink:href="#icon-aixin" ></use>
                      </svg>
                      {caption}</p>
		        </div>
		        <div class="side side-back">
		          <p class="desc">
                      <svg class="icon" aria-hidden="true" >
                          <use xlink:href="#icon-biaoqian" ></use>
                      </svg>
                      {desc}</p>
		        </div>
		      </div>
		    </div>
		  </div>



</body>
</html>